<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input type="text" v-model="searchKeyword" placeholder="搜索律师姓名、专长" @input="onSearch" />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 律师列表 -->
    <view class="lawyer-list">
      <view class="lawyer-item" v-for="(item, index) in lawyerList" :key="index" @tap="navigateToDetail(item)">
        <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
        <view class="info">
          <view class="name-row">
            <text class="name">{{item.name}}</text>
            <text class="status" :class="{'online': item.isOnline}">{{item.isOnline ? '在线' : '离线'}}</text>
          </view>
          <text class="title">{{item.title}}</text>
          <view class="tags">
            <text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
          </view>
          <view class="price-row">
            <text class="price">¥{{item.price}}/次</text>
            <button class="consult-btn" :disabled="!item.isOnline" @tap.stop="startConsult(item)">立即咨询</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <uni-load-more :status="loadMoreStatus"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      bannerList: [
        { image: '/static/images/banner/轮播图1.jpeg' },
        { image: '/static/images/banner/轮播图2.jpg' },
        { image: '/static/images/banner/轮播图3.jpg' }
      ],
      lawyerList: [],
      page: 1,
      pageSize: 10,
      loadMoreStatus: 'more'
    }
  },
  onLoad() {
    this.loadData()
  },
  onReachBottom() {
    if (this.loadMoreStatus === 'more') {
      this.loadMore()
    }
  },
  methods: {
    loadData() {
      // TODO: 加载律师列表数据
      this.loadMoreStatus = 'loading'
      // 模拟数据
      setTimeout(() => {
        this.lawyerList = [
          {
            id: 1,
            name: '张律师',
            avatar: '/static/images/图片素材/律师1.jpg',
            title: '高级合伙人',
            tags: ['婚姻家事', '合同纠纷', '劳动纠纷'],
            price: 200,
            isOnline: true
          },
          {
            id: 2,
            name: '李律师',
            avatar: '/static/images/图片素材/律师2.jpg',
            title: '资深律师',
            tags: ['刑事辩护', '交通事故', '房产纠纷'],
            price: 300,
            isOnline: false
          },
          {
            id: 3,
            name: '王律师',
            avatar: '/static/images/图片素材/律师3.jpg',
            title: '资深律师',
            tags: ['婚姻家事', '劳动纠纷', '合同纠纷'],
            price: 250,
            isOnline: true
          },
          {
            id: 4,
            name: '赵律师',
            avatar: '/static/images/图片素材/律师4.jpg',
            title: '高级合伙人',
            tags: ['刑事辩护', '交通事故', '房产纠纷'],
            price: 350,
            isOnline: true
          }
        ]
        this.loadMoreStatus = 'more'
      }, 1000)
    },
    loadMore() {
      this.page++
      // TODO: 加载更多数据
    },
    onSearch() {
      this.page = 1
      this.lawyerList = []
      this.loadData()
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/team/detail?id=${item.id}`
      })
    },
    startConsult(item) {
      if (!item.isOnline) {
        uni.showToast({
          title: '律师当前不在线',
          icon: 'none'
        })
        return
      }
      uni.navigateTo({
        url: `/pages/consult/index?lawyerId=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 30rpx;
}

.search-box {
  padding: 20rpx;
  background-color: #fff;
  
  .search-input {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
    
    input {
      flex: 1;
      margin-left: 10rpx;
      font-size: 28rpx;
    }
  }
}

.banner {
  height: 400rpx;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.lawyer-list {
  padding: 20rpx;
  
  .lawyer-item {
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .info {
      flex: 1;
      
      .name-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .name {
          font-size: 32rpx;
          font-weight: bold;
        }
        
        .status {
          font-size: 24rpx;
          color: #999;
          
          &.online {
            color: #07c160;
          }
        }
      }
      
      .title {
        font-size: 26rpx;
        color: #666;
        margin-top: 10rpx;
      }
      
      .tags {
        margin-top: 10rpx;
        
        .tag {
          display: inline-block;
          font-size: 22rpx;
          color: #1890ff;
          background-color: rgba(24, 144, 255, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          margin-right: 10rpx;
        }
      }
      
      .price-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;
        
        .price {
          font-size: 28rpx;
          color: #f5222d;
          font-weight: bold;
        }
        
        .consult-btn {
          font-size: 24rpx;
          color: #fff;
          background-color: #1890ff;
          padding: 10rpx 30rpx;
          border-radius: 30rpx;
          
          &[disabled] {
            background-color: #ccc;
          }
        }
      }
    }
  }
}
</style> 